import React, { useState } from 'react';
import { Button, Modal, Icon } from 'antd-mobile';
import { List, Avatar, Spin, Empty } from 'antd';
import {
  QrcodeOutlined,
  DownSquareOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { onestopservice } from '@/services/weapp';
import { connect, useRequest } from 'umi';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import BackIcon from '@/components/BackIcon';

let Service = (props) => {
  let [height, cheight] = useState(document.body.clientHeight),
    {
      global: { userinfo },
      location: { query },
    } = props;

  let { data, loading } = useRequest(() => {
    let token = localStorage.getItem('TOKENS');
    return token ? onestopservice({}) : { list: [] };
  });

  return (
    <div style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}>
      <BackIcon></BackIcon>
      {data?.list ? (
        data?.list
          .filter((it) => it.id == query.id)
          .map((it) => {
            return (
              <div
                key={it.id}
                style={{
                  overflow: 'hidden',
                  backgroundColor: '#fff',
                  marginBottom: 20,
                }}
                className="img"
              >
                <img src={it.origin_url} alt="" style={{ width: '100%' }} />
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <span
                    style={{
                      display: 'inline-block',
                      padding: 12,
                      fontSize: 20,
                      borderBottom: '1px solid rgba(16, 142, 233,0.5)',
                      textAlign: 'center',
                    }}
                  >
                    {it.title}
                  </span>
                </div>
                <p style={{ padding: 12, textIndent: 24 }}>{it.description}</p>
              </div>
            );
          })
      ) : (
        <Empty />
      )}
    </div>
  );
};
export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Service);
